<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="css/muse-ui.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
		<link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">
		<link rel="stylesheet" href="css/muse-ui-loading.css">
		<link rel="stylesheet" href="https://at.alicdn.com/t/font_951857_sr7zod4vu4.css">
		<script src="js/vue.min.js"></script>
		<script src="js/muse-ui.js"></script>
		<script src="js/muse-ui-loading.js"></script>
		<script src="js/muse-ui-toast.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/utils.js"></script>
		<style>
			.container{
				height:calc(100vh);
				width: 100%;
			}
			.container input {
				color: #ff4081;
			}
			.login-head{
				margin-top: 20%;
				width: 100%;
				text-align: center;
			}
			.icon-denglu{
				color: #fff;
				font-size: 70px;
			}
			.btn:active {
				transform: rotate(360deg);
				-webkit-transform: rotate(360deg);
				-moz-transform: rotate(360deg);
				-o-transform: rotate(360deg);
				-ms-transform: rotate(360deg);
			}
		</style>
	</head>
	<body>
		<div id="body">
			<mu-appbar style="width: 100%;position: fixed;top: 0;padding-top: 20px;height: auto;" color="primary">
				<mu-button icon slot="left" @click="util.back()">
					<mu-icon value="arrow_back"></mu-icon>
				</mu-button>
				待办事项
			</mu-appbar>
			<mu-container style="padding-top: 76px;">
				<div style="padding: 15px;">
					<div v-if="waitDoList.length==0" style="margin-top: 15px;text-align: center;">
						<div style="color: rgba(0,0,0,.3);">暂无待办事项</div>
					</div>
					<div v-else>
						<mu-list style="background-color: #FFFFFF;">
							<div v-for="(item,index) in waitDoList">
								<mu-list-item button :ripple="true" @click="goWaitDo(item)">
									<mu-list-item-title>{{item.text}}</mu-list-item-title>
									<mu-list-item-action>
										<mu-icon value="keyboard_arrow_right"></mu-icon>
									</mu-list-item-action>
								</mu-list-item>
								<mu-divider v-if="index!=waitDoList.length-1"></mu-divider>
							</div>
						</mu-list>
					</div>
				</div>
				<mu-button fab color="red" style="position: fixed;bottom: 50px;right: 20px;" @click="getWaitingDoList()">
					<mu-icon value="refresh" class="btn"></mu-icon>
				</mu-button>
			</mu-container>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#body",
			data() {
				return {
					waitingDoTabsIndex: 0,
					waitDoList: [],
				}
			},
			methods: {
				goWaitDo(waitdDo) {
					if (waitdDo.type == "抄表") {
						util.setData("buildingName", waitdDo.text);
						util.setData("buildingId", waitdDo.id);
						util.openWindow("my_building_meter_chaobiao.html");
					}
					if (waitdDo.type == "维修") {
						util.openWindow("my_repair.html");
					}
					if (waitdDo.type == "检查") {
						util.openWindow("safeCheck.html");
					}
				},
				getWaitingDoList() {
					this.waitDoCount = 0;
					this.checkTaskCount = 0;
					util.ajax("/worker/getWaitingDoList", null, data => {
						this.waitDoList = data.object;
						this.waitDoList.forEach(item => {
							if (item.type == "检查") {
								this.checkTaskCount++;
							} else {
								this.waitDoCount++;
							}
						})
					})
				}
			}
		})
		document.addEventListener('plusready', function() {
			vm.getWaitingDoList();
		});
	</script>
</html>
